<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单控件绑定</title>
		<script src="Vue.js"></script>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			html,body{
				height:100%;
				width:100%;
			}
			#box{
				width:300px;
				min-height:400px;
				margin:50px auto;
				padding:20px;
				border:2px solid black;
				box-shadow:10px 20px 20px 10px gray;
			}
			hr{
				margin:20px 0;
			}
			span{
				color:red;
			}
			b{
				color:blue;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<span>文本框：</span><input type="text" v-model="mytext">
			<b>{{mytext}}</b><!-- 文本框 -->
			<hr>
			
			<p><span>单个复选框：</span><input type="checkbox" v-model="ischecked">记住用户名
			<b>{{ischecked}}</b></p><!-- 单个复选框 -->
			<hr>
			<span>多个复选框:</span>
			<p><input type="checkbox" v-model="checkgrounp" value="HTML">HTML</p><!-- 多个复选框，必须包含value值 -->
			<p><input type="checkbox" v-model="checkgrounp" value="CSS">CSS</p>
			<p><input type="checkbox" v-model="checkgrounp" value="JS">JS</p>
			<p><input type="checkbox" v-model="checkgrounp" value="JQ">JQ</p>
			<p><input type="checkbox" v-model="checkgrounp" value="PHP">PHP</p>
			<b>{{checkgrounp}}</b>
			<hr>
			
			<span>单选框:</span>
			<p>male: <input type="radio" value="male" v-model="sex"></p><!-- 单选框 ,必须包含value值-->
			<p>female: <input type="radio" value="female" v-model="sex"></p>
			<b>{{sex}}</b>
			<hr>
			
			<span>下拉菜单:</span>
			 <select v-model="selected"><!-- 下拉菜单 -->
			    <option disabled value="">请选择</option><!-- disabled 禁用 -->
			    <option>A</option>
			    <option>B</option>
			    <option>C</option>
			  </select>
			  <b>{{selected}}</b>
			  <hr>
			  
			  <span>.lazy:</span>
			  <input type="text" v-model.lazy="name"><b>{{name}}
			  </b><!-- .lazy（失去焦点的时候，绑定改变一次）; -->
			  <hr>
			  
			   <span>.trim:</span>
			   <input type="text" v-model.trim="test">
			   <b>|{{test}}|</b><!-- .trim（过滤首尾空格）; -->
			   <hr>
			   
			   <span>.number:</span>
			    <input type="number" v-model.number="age">
			    <b>{{age}}</b><!-- .number（将用户输入的内容，转换为数值）; -->
			    <hr>
			    
		</div>
		
		<script>
			/* 
			表单控件绑定：
			v-model-->双向数据绑定
			（1），基本用法-->购物车
			（2），修饰符
			      -->.lazy（失去焦点的时候，绑定改变一次）;
			      -->.number（将用户输入的内容，转换为数值）;
				  -->.trim（过滤首尾空格）;
			 
			 */
			var vm = new Vue({
				el:"#box",
				data:{
					mytext:"1234",
					ischecked:false,
					checkgrounp:[],
					sex:"male",
					selected:"",
					name:"wuhao",
					age:23,
					test:""
				}
			})
		</script>
	</body>
</html>
